<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<script src="./lib/template-web.js"></script>
</head>

<body style="padding: 15px;">

	<!-- 添加图书的Panel面板 -->
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">添加新图书</h3>
		</div>

		<form>
			<div class="panel-body form-inline">

				<div class="input-group">
					<div class="input-group-addon">书名</div>
					<input name='bookname' type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
				</div>

				<div class="input-group">
					<div class="input-group-addon">作者</div>
					<input name='author' type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
				</div>

				<div class="input-group">
					<div class="input-group-addon">出版社</div>
					<input name="publisher" type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
				</div>

				<button type="submit" id="btnAdd" class="btn btn-primary">添加</button>

			</div>
		</form>
	</div>


	<!-- 图书的表格 -->
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th>Id</th>
				<th>书名</th>
				<th>作者</th>
				<th>出版社</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tb">

		</tbody>

		<script type="text/html" id='tpl'>
			<tr>
				<td>Id---1</td>
				<td>书名---2</td>
				<td>作者---3</td>
				<td>出版社---4</td>
				<td>操作--5</td>
			</tr>
		</script>

		<div id='loading' class="move" style="width:100px;height:100px;background:red;display:none">加载中。。。。</div>
	</table>
	<script>
		/* 
		1、创建实例对象
		2、调用open   设置请求类型+url
		3、调用send   发送请求
		4、监听是否请求完成   onreadystatechange
		5、判断请求是否完成   readyState
		 */
		const xhr = new XMLHttpRequest()
		xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
		xhr.send()
		xhr.onreadystatechange = function(data) {
			console.log(xhr.readyState, 8888);

			if (xhr.readyState == 4 && xhr.status == 200) {
				//  判断是否请求完成  以及是否状态200  成功
				//console.log( xhr.response);
				//console.log(typeof xhr.response);
				var html = template('tpl', JSON.parse(xhr.response))
				console.log(html);

				document.querySelector('#tb').innerHTML = html
			}
		}
	</script>

</body>

</html>
